<template>
  <div class="target-group">
    <div
      v-for="(item, index) in targetOptions"
      :key="index"
      class="target-group__item"
    >
      <span class="target-group__item-value">
        {{ getTargetValue(item.prop) }}
      </span>
      <span class="target-group__item-label">{{ item.label }}</span>

      <span
        :style="{ '--color': item.color }"
        class="target-group__item-line"
      ></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserInfo } from "@/hooks/useUserInfo";

const targetOptions = [
  { label: "BMI", prop: "bmi", color: "#1AA1E6" },
  { label: "血压", prop: "bloodPressure", color: "#FFE030" },
  { label: "空腹血糖", prop: "fastingBloodGlucose", color: "#0DC98B" },
  { label: "低密度脂蛋白", prop: "ldlCholesterol", color: "#FF5A5A" },
  { label: "血尿酸", prop: "uricAcid", color: "#FF9D21" },
];

defineOptions({
  name: "target-group",
});

const { userInfo, bloodPerssure, healthTarget } = useUserInfo();

const getTargetValue = (prop: string) => {
  if (!healthTarget.value) return "--";
  // if (prop === "bloodPressure") {
  //   return bloodPerssure.value;
  // }
  return healthTarget.value[prop];
};
</script>

<style lang="less">
.target-group {
  display: flex;
  align-items: center;
  gap: 12px;
  &__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 1;
    height: 130px;
    position: relative;
    background-color: #fff;
    border-radius: 16px;

    &-value {
      font-weight: 500;
      font-size: 32px;
      color: #000000;
    }
    &-label {
      font-weight: 400;
      font-size: 20px;
      color: #8b8b8b;
      // line-height: 20px;
    }
    &-line {
      position: absolute;
      transform: translate(-50%, 0);
      left: 50%;
      bottom: 0;

      width: 34px;
      height: 8px;
      background: var(--color);
      border-radius: 6px 6px 0 0;
    }
  }
}
</style>
